<template>
  <nav class="navbar navbar-expand-lg  navbar-dark bg-dark">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">在线商城</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText"
        aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarText">
        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
          <li class="nav-item">
            <router-link :to="{ name: 'home' }" class="nav-link">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'order' }" class="nav-link">订单</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'shopcart' }" class="nav-link">购物车</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'favorite' }" class="nav-link">收藏</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'addproduct' }" class="nav-link">添加商品</router-link>
          </li>
          <li class="nav-item">
            <router-link :to="{ name: 'registershop' }" class="nav-link">注册店铺</router-link>
          </li>
          <li class="nav-item" v-if="$store.state.username === '管理员'">
            <router-link :to="{ name: 'userlist' }" class="nav-link">用户列表</router-link>
          </li>
        </ul>

        <ul class="navbar-nav" v-if="$store.state.is_login">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
              {{ $store.state.username }}
            </a>
            <ul class="dropdown-menu small">
              <li><a class="dropdown-item" href="#" @click="logout">退出</a></li>
              <li v-if="$store.state.username !== '管理员'"><router-link :to="{ name: 'info' }"
                  class="dropdown-item">修改信息</router-link></li>
              <li v-if="$store.state.username !== '管理员'"><router-link :to="{ name: 'connect', params: { username: '管理员' } }"
                  class="dropdown-item">联系管理员</router-link></li>
            </ul>
          </li>
        </ul>

        <ul class="navbar-nav" v-else>
          <li class="nav-item ">
            <router-link :to="{ name: 'login' }" class="nav-link">
              登录
            </router-link>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">退出</a></li>
            </ul>
          </li>

          <li class="nav-item ">
            <router-link :to="{ name: 'register' }" class="nav-link " href="#" role="button" aria-expanded="false">
              注册
            </router-link>
            <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">退出</a></li>
            </ul>
          </li>
        </ul>

      </div>
    </div>
  </nav>
</template>

<script>
import { useStore } from 'vuex';
export default {
  setup() {
    let store = useStore();
    const logout = () => {
      store.commit("logout");
    }
    return { logout };
  }
}
</script>

<style scoped></style>